import React, { useMemo } from 'react';
import { Outlet } from 'react-router-dom';
import styled from 'styled-components';
import { MaterialStore, useMaterialStore } from '@/stores/useMaterial';
import EditPannel from '@/components/Survey/EditItems/EditPannel';
import { dispatchStatus } from '@/stores/dispatch';
import { StatusContext } from './context';
import { observer } from 'mobx-react-lite';

// 创建样式化组件
const Container = styled.div`
  width: 100%;
  // Header组件高度50px，h1高度50px，上下margin 20px，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 20px);
  align-items: flex-start;
  border: 1px solid var(--border-color);
  border-top-right-radius: var(--border-radius-lg);
  border-bottom-left-radius: var(--border-radius-lg);
  border-bottom-right-radius: var(--border-radius-lg);

  .left {
    width: 180px;
    text-align: center;
    align-items: flex-start;
    padding: 20px;
  }
  .layout-center {
    width: 550px;
    // 多减去的60px是上下的padding，，最后20px是额外多减去一部分，避免贴底
    height: calc(100vh - 100px - 40px - 60px - 20px);
    overflow-y: scroll;
    padding: 30px;
    border-left: 1px solid var(--border-color);
  }
  .right {
    width: 350px;
    height: calc(100vh - 100px - 40px - 20px);
    overflow-y: scroll;
    border-left: 1px solid var(--border-color);
  }
`;
interface PageProps {
  children?: React.ReactNode;
}

const Layout: React.FC<PageProps> = observer(props => {
  const store = useMaterialStore as unknown as MaterialStore;
  // 获取选中组件的状态数据
  const currentCom = useMemo(() => {
    return store.coms[store.currentMaterialCom];
  }, [store.coms, store.currentMaterialCom]);

  console.log('layout', props, currentCom);

  const updateStatus = (configKey: string, payload?: any) => {
    console.log(configKey, payload);
    const status: any = currentCom.status;
    dispatchStatus(store, status, configKey, payload);
  };

  const contextValue = {
    status: currentCom.status,
    serialNum: 1,
    updateStatus
  };

  return (
    // 透传上下文对象给子组件
    <StatusContext.Provider value={contextValue}>
      <Container className="flex">
        <div className="left flex flex-wrap justify-between">{props.children}</div>
        {/* 业务组件 */}
        <div className="layout-center">
          <Outlet context={contextValue} />
        </div>
        <div className="right">
          <EditPannel com={currentCom} />
        </div>
      </Container>
    </StatusContext.Provider>
  );
});

export default Layout;
